import { Layout, Menu } from 'antd';
import {
  PieChartOutlined,
  DesktopOutlined
} from '@ant-design/icons';
import 'antd/dist/antd.css'
import React, { useState } from 'react';
import WordBase from './WordBase'

import { Route, Link } from 'react-router-dom';
import SentenceBase from './SentenceBase';
import WordUser from '../components/WordUser';
import { connect } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
import { RootState } from 'src/redux';
import * as MainInfoAction from '../components/MainInfo/reducer'
import { WordListState } from '../components/WordList/reducer';
import TagEditBase from './TagEditBase';

const { Header, Content, Footer, Sider } = Layout;

interface AppProps {
  wordListState: WordListState
  setWord: typeof MainInfoAction.setWord
}

const _App: React.SFC<AppProps> = (props) => {
  const { wordListState, setWord } = props
  const [collapsed, setCollapsed] = useState(true);

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsedWidth="0"
        collapsible
        breakpoint="lg"
        collapsed={collapsed} onCollapse={() => { setCollapsed(!collapsed) }}
      >
        <div className="logo" />
        <Menu theme="dark" mode="inline">
          <Menu.Item key="1">
            <PieChartOutlined />
            <span>单词本</span>
            <Link to={'/word'} onClick={() => {
              if (wordListState.dto.dtos[wordListState.highlight]) {
                setWord(wordListState.dto.dtos[wordListState.highlight].wordValue)
              }
              else {
                setWord(null)
              }
            }}></Link>
          </Menu.Item>
          <Menu.Item key="2">
            <DesktopOutlined />
            <span>例句库</span>
            <Link to={'/sentence'} onClick={() => setWord('')}></Link>
          </Menu.Item>
          <Menu.Item key="3">
            <DesktopOutlined />
            <span>tag编辑</span>
            <Link to={'/tagEdit'} ></Link>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Header style={{ background: '#fff', padding: 0 }} >
          <WordUser />
        </Header>
        <Content style={{ margin: '0 16px' }}>

          <Route exact path="/" component={WordBase} />
          <Route exact path="/word" component={WordBase} />
          <Route exact path="/sentence" component={SentenceBase} />
          <Route exact path="/tagEdit" component={TagEditBase} />

        </Content>
        <Footer style={{ textAlign: 'center', fontFamily: 'SimHei' }}>◣◥◣◥◣◥◣◥◣◥◣◥◣☢ WordBase ☢ WARNING! ☢ WordBase ☢◥◣◥◣◥◣◥◣◥◣◥◣◥</Footer>
      </Layout>
    </Layout>
  );
}

const mapStateToProps = (state: RootState) => ({
  wordListState: state.WordListState
})

const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators({
  setWord: MainInfoAction.setWord
}, dispatch);

/**
* 得到当前过滤器并渲染 Link。
*/
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(_App)

export default App;
